import {MyNavBar, ShowLoading} from '@/components'
import {_getReply, _delReply} from './store'
import './index.less'
import {useListHook} from '@/hooks'
import ReplyItem from './components/replyItem'
import {Modal, Toast} from 'antd-mobile'
const alert = Modal.alert

function MyReply() {
  let reset = null
  const resetFunc = (resetTemp) => {
    reset = resetTemp
  }

  const {data, loading, showLoading} = useListHook({func: _getReply, resetFunc})
  const handleDelete = (id) => {
    alert('删除', '你确定要删除此回复吗？', [
      {text: '取消'},
      {
        text: '确认', onPress: async () => {
          const result = await _delReply(id)
          if (result) {
            Toast.success('删除成功')
            reset()
          }
        }
      }
    ])
  }

  return (
    <div>
      <MyNavBar title='我的回复'/>
      <div className='myReply'>
        {!loading && data.map(item => (
          <ReplyItem key={item.id} data={item} handleDelete={handleDelete}/>
        ))}
        <ShowLoading showLoading={showLoading}/>
      </div>
    </div>
  )
}

export default MyReply
